<template>
  <div class="wrapper">
    <a-form v-if="options" :labelAlign="'left'">
      <a-row :gutter="24">
        <a-col :lg="6" :md="12" :sm="24" v-for="(item, index) in options" :key="index">
          <a-form-item v-bind="formItemLayout" :label="item.ConditionName">
            <a-select showSearch optionFilterProp="children" v-decorator="[{ initialValue: item.DropDownLists[0].Value }]" @change="value => change(value, item.ParamName)" allowClear>
              <a-select-option v-for="itema in item.DropDownLists" :value="itema.Value" :key="itema.Value">{{ itema.Name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div id="chart" class="chartDiv"></div>
  </div>
</template>

<script>
import { analysis } from '@/api/analysis'
import echarts from 'echarts'
export default {
  components: {},
  props: {
    chartData: {
      type: Object,
      default: null
    },
    content: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      option: null,
      options: null,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      data: null,
      params: {}
    }
  },
  watch: {
    dataChange: {
      handler: function(newval, oldval) {
        this.initData2()
      },
      deep: true
    },
    chartDataChange: {
      handler: function(newval, oldval) {
        this.initData()
      },
      deep: true
    }
  },
  computed: {
    dataChange() {
      return this.data
    },
    chartDataChange() {
      return this.chartData
    }
  },
  methods: {
    initData() {
      const dataSource = this.chartData
      if (dataSource) {
        this.initChart(dataSource)
      }
    },
    initData2() {
      const dataSource = this.data
      if (dataSource) {
        this.initChart(dataSource)
      }
    },
    initChart(dataSource) {
      if (dataSource.Datas.length > 0) {
        var data = []
        var total = 0
        var target = new Map()
        this.options = dataSource.Conditions
        data = dataSource.Datas.map(res => {
          return { value: res.Value, name: res.Name }
        })
        data.forEach(item => {
          total += item.value
          target.set(item.name, item.value)
        })
        this.chart = echarts.init(document.getElementById('chart'), 'light')
        this.option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            formatter: function(name) {
              const lists = []
              const num = target.get(name)
              const inum = (target.get(name) / total) * 100
              const vnum = inum ? parseFloat(inum).toFixed(2) : 0
              lists.push(`${name} ${num}-${vnum}%`)
              return lists
            }
          },
          series: [
            {
              name: '区域',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: data
              // emphasis: {
              //   itemStyle: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 0,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // }
            }
          ]
        }
        // 绘制图表
        this.chart.setOption(this.option, true)
        // setTimeout(() => {
        //   window.onresize = function() {
        //     if (this.chart) {
        //       this.chart.resize()
        //     }
        //   }
        // }, 1000)
      } else {
        this.chart.clear()
      }
    },
    change(value, name) {
      let keyValues = []
      this.params[name] = value
      for (let prop in this.params) {
        let keyValue = {}
        keyValue.Name = prop
        keyValue.Value = this.params[prop]
        keyValues.push(keyValue)
      }
      analysis(this.content, keyValues).then(res => {
        res.data.Conditions[0].DropDownLists.push({ Name: 'ceshi', Value: 10000 })
        this.data = res.data
      })
    }
  },
  created() {
    // setTimeout(() => {
    //   this.data = this.chartData
    //   this.initChart()
    // }, 1000)
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.tree-select-label {
  display: inline-block;
  height: 30px;
  font-size: 12px;
  vertical-align: bottom;
  text-align: center;
}
.tree-select-self-FX {
  display: inline-block;
  width: 200px;
}
.chartDiv {
  height: 500px;
  margin: 0 auto;
}
</style>
